// Vue.util.defineReactive(对象,键,值)
// defineReactive执行一次就形成一个闭包，val会保留下来
function defineReactive(obj, key, val) {
  // 递归
  observe(val)
  // 属性拦截
  Object.defineProperty(obj, key, {
    get() {
      console.log('get', key);
      return val;
    },
    set(newVal) {
      if (newVal !== val) {
        console.log('set', key);
        val = newVal;
      }
    }
  })
}

// 遍历传入obj的所有属性，执行响应式处理
function observe(obj) {
  if (typeof obj !== 'object' || obj == null) {
    return obj;
  }
  Object.keys(obj).forEach(key => defineReactive(obj, key, obj[key]));
}

// 动态新增一个属性
// Vue.set(obj,key,val)
function set(obj, key ,val){
  defineReactive(obj,key,val);
}

const obj = {
  name: "小梁",
  age: 18,
  hobby: {
    play: "篮球",
    game: "LoL"
  }
}
// defineReactive(obj,'name','小梁');
// 数组：不能支持，push、splice、pop、shift、unshift、reverse、等直接改变数组的方法
// 对数组的7个变更方法进行拦截，重写，让他们不仅做数组操作，还进行变更通知
observe(obj);


// obj.name
// obj.age
// obj.name = "小李"
// obj.age = 28
// obj.hobby.play
// set(obj.hobby,'eat','香蕉');
